<template>
	<div class="app">
		<h2 >{{msg}} ,学生姓名:{{studentName}}</h2>
		<!-- 通过父组件给子组件传递函数类型的props实现: 子给父传递数据 -->
		<School :getSchoolName="getSchoolName"></School>
		
		<!-- 使用v-on 通过父组件给子组件绑定一个自定义事件实现: 子给父传递数据 -->
		<!-- <Student @yhw.once='getStudentName' @demo='m1'/> -->
		
		<!-- ref 通过父组件给子组件绑定一个自定义事件实现: 子给父传递数据 -->
		<!-- .native 标志是原生事件 -->
		<Student ref="student" @click.native='show'/>
	</div>
	
</template>

<script>
	// 引入Student组件
	import Student from './components/Student.vue'
	import School  from './components/School.vue'
	
	// 如果样式类名冲突，按照引入的顺序，后来居上，将前面的样式覆盖 
	
	export default{
		name:'App',
		components:{
			Student,
			School
		},
		data(){
			return{
				msg:'你好啊,组件自定义事件',
				studentName:''
			}
		},
		methods:{
			getSchoolName(name){
				console.log('APP收到了学校名称:',name)
			},
			getStudentName(name,...params){
				// console.info('demo被调用了',name,x,y,z);
				console.info('demo被调用了',name,params);
				this.studentName=name;
			},
			m1(){
				console.log('demo事件被触发')
			},
			show(){
				alert(123)
			}
		},
		mounted() {
			this.$refs.student.$on('yhw',this.getStudentName)
			// 绑定自定义事件 一次性
			// this.$refs.student.$once('yhw',this.getStudentName)
			
			// this.$refs.student.$on('yhw',(name,...params) => {
			// 	console.info('demo被调用了',name,params);
			// 	this.studentName=name;
			// 	console.log(this)
			// })
		},
	}
</script>

<style scoped>
	.app{
		background-color: #c5bfb4;
		padding: 5px;
	}
</style>
